<ng-container *ngIf="changelog$ | async as changelog">
  <div class="modal-header">
    <h4 class="modal-title">
      Release notes v{{ appVersion }}
      <a
        class="btn btn-link btn-sm btn-icon text-primary"
        href="{{ releaseUrl }}"
        target="_blank"
      >
        View online
      </a>
    </h4>
  </div>
  <div class="modal-body">
    <p *ngIf="!changelog.loading && changelog.error" class="message">
      Changelog could not be loaded
    </p>
    <markdown *ngIf="!changelog.loading && !changelog.error">
      {{ changelog.data }}
    </markdown>
    <div *ngIf="changelog.loading" class="my-2 d-flex justify-content-center">
      <app-spinner size="24"></app-spinner>
    </div>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      class="btn btn-secondary modal-close"
      (click)="close()"
    >
      Close
    </button>
  </div>
</ng-container>
